<template>
  <div class="container">
    <!-- 左侧：一级分类和二级分类 -->
    <div class="left-side">
      <!-- 一级分类 -->
      <ul>
        <li
          v-for="i in first"
          :key="i.id"
          @click="toggleSecond(i.id)"
          :class="{ active: activeFirstId === i.id }"
          style="cursor: pointer; padding: 10px;"
        >
          {{ i.resource_name }}
        </li>
      </ul>

      <!-- 二级分类 -->
      <div v-if="second.length > 0 && activeFirstId !== null">
        <ul>
          <li
            v-for="j in second"
            :key="j.id"
            :class="{ active: activeSecondId === j.id }"
            @click="showAddPage(j.id)"
            style="margin: 15px; cursor: pointer; padding: 10px;"
          >
            {{ j.resource_name }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 右侧：添加页面 -->
    <div class="right-side">
      <div v-if="showInput1">
        <p>用户名称：<el-input v-model="inputValue1.name" placeholder="请输入用户名称" style="width:180px"/></p>
        <p>用户密码：<el-input v-model="inputValue1.password" placeholder="请输入用户密码" style="width:180px"/></p>
        <p>角色的id：<el-input v-model="inputValue1.role_id" placeholder="请输入角色id" style="width:180px"/></p>
        <el-button type="primary" @click="submitForm1">提交</el-button>
      </div>
      <div v-if="showInput2">
        <p>资源名称：<el-input v-model="inputValue2.name" placeholder="请输入资源名称" style="width:180px;"/></p>
        <p>资源路径：<el-input v-model="inputValue2.url" placeholder="请输入资源路径" style="width:180px;"/></p>
        <p>资源分类：<el-input v-model="inputValue2.pid" placeholder="请输入资源分类" style="width:180px;"/></p>
        <el-button type="primary" @click="submitForm2">提交</el-button>
      </div>
      <div v-if="showInput3">
        <p>角色名称：<el-input v-model="inputValue" placeholder="请输入角色名称" style="width:180px;"/></p>
        <el-button type="primary" @click="submitForm3">提交</el-button>
      </div>

      <!-- 显示添加页面内容 -->
      <!-- <div v-if="addPageContent">
        <h3>{{ addPageContent.title }}</h3>
        <p>{{ addPageContent.description }}</p>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import http from '../http'; // 假设你已经配置了 http 请求工具
import { ElMessage } from 'element-plus';

// 存储一级分类数据
const first = ref([]);
// 存储二级分类数据
const second = ref([]);
// 存储当前展开的一级分类 ID
const activeFirstId = ref(null);
// 存储当前点亮的二级分类 ID
const activeSecondId = ref(null);
// 是否显示输入框和提交按钮
const showInput1 = ref(false);
const showInput2 = ref(false);
const showInput3 = ref(false);
// 输入框的值
const inputValue = ref('');
const inputValue1 = ref({
  name:"",
  password:"",
  role_id:""
});
const inputValue2 = ref({
  name:"",
  url:"",
  pid:""
});
// 存储添加页面的内容
const addPageContent = ref(null);

// 获取一级分类数据
const fetchFirst = async () => {
  try {
      const res = await http.get('/res/');
      first.value = res.data;
  } catch (error) {
      console.error('Failed to fetch first level resources:', error);
  }
};

// 根据一级分类 ID 获取二级分类数据
const fetchSecond = async (id) => {
  try {
      const res = await http.get(`/res/?id=${id}`);
      second.value = res.data;
  } catch (error) {
      console.error('Failed to fetch second level resources:', error);
  }
};

// 切换二级分类的显示和隐藏
const toggleSecond = (id) => {
  if (activeFirstId.value === id) {
      // 如果点击的是已经展开的一级分类，则收起二级分类
      activeFirstId.value = null;
      second.value = [];
      activeSecondId.value = null; // 清空二级分类的选中状态
      showInput1.value = false; // 隐藏输入框和提交按钮
      showInput2.value = false; // 隐藏输入框和提交按钮
      showInput3.value = false; // 隐藏输入框和提交按钮
      addPageContent.value = null; // 清空添加页面内容
  } else {
      // 否则，展开新的二级分类
      activeFirstId.value = id;
      fetchSecond(id);
      activeSecondId.value = null; // 清空二级分类的选中状态
      showInput1.value = false; // 隐藏输入框和提交按钮
      showInput2.value = false; // 隐藏输入框和提交按钮
      showInput3.value = false; // 隐藏输入框和提交按钮
      addPageContent.value = null; // 清空添加页面内容
  }
};

// 显示添加页面
const showAddPage = (id) => {
  if (activeSecondId.value === id) {
      // 如果点击的是已经点亮的二级分类，则取消点亮并隐藏添加页面
      activeSecondId.value = null;
      addPageContent.value = null;
      showInput1.value = false; // 隐藏输入框和提交按钮
      showInput2.value = false; // 隐藏输入框和提交按钮
      showInput3.value = false; // 隐藏输入框和提交按钮
  } else {
      // 否则，点亮新的二级分类并展示对应的添加页面
      activeSecondId.value = id;
      // 模拟获取添加页面内容（根据实际需求调用接口）
      // addPageContent.value = {
      //     title: `添加页面 - ${id}`,
      //     description: `这是二级分类 ${id} 的添加页面内容。`,
      // };

      // 如果 id=2，显示输入框和提交按钮
      if (id === 2) {
          showInput1.value = true;
      } else {
          showInput1.value = false;
      }
      if (id === 3) {
          showInput2.value = true;
      } else {
          showInput2.value = false;
      }
      if (id === 4) {
          showInput3.value = true;
      } else {
          showInput3.value = false;
      }
  }
};

const submitForm1 = () =>{
  if (!inputValue1.value) {
      alert('请输入内容');
  }
  // 调用接口提交数据
  http.post('/adminuser/', inputValue1.value).then(res => {
    if (res.data.code === 200) {
      ElMessage.success(res.data.msg);
      inputValue1.value = ''; // 清空输入框
    }
    else {
      ElMessage.error(res.data.msg);
    }
  })
}

const submitForm2 = () =>{
  if (!inputValue2.value) {
      alert('请输入内容');
  }
  // 调用接口提交数据
  http.post('/res/', inputValue2.value).then(res => {
    if (res.data.code === 200) {
      ElMessage.success(res.data.msg);
      inputValue2.value = ''; // 清空输入框
    }
    else {
      ElMessage.error(res.data.msg);
    }
  })
}

const submitForm3 = () => {
  if (!inputValue.value) {
      alert('请输入内容');
  }
  // 调用接口提交数据
  http.post('/role/', { name: inputValue.value }).then(res => {
    if (res.data.code === 200) {
      ElMessage.success(res.data.msg);
      inputValue.value = ''; // 清空输入框
    }
    else {
      ElMessage.error(res.data.msg);
    }
  })
};

onMounted(() => {
  fetchFirst();
});
</script>

<style scoped>
.container {
  display: flex; /* 使用 flex 布局 */
  height: 100vh; /* 容器高度占满整个视口 */
}

/* 左侧样式 */
.left-side {
  width: 120px; /* 左侧宽度固定 */
  padding: 20px;
  border-right: 1px solid #ccc; /* 添加分割线 */
}

/* 右侧样式 */
.right-side {
  flex: 1; /* 右侧宽度自适应 */
  padding: 20px;
  background-color: #fff;
}

.right-side button{
  width: 100px;
}

/* 点亮效果 */
.active {
  color: darkgray; /* 点亮效果 */
  font-weight: bold; /* 加粗字体 */
}
</style>